<template>
  <view class="w-full h-[120rpx] bg-#fff flex justify-between px-[40rpx] items-center">
    <!-- 返回按钮 -->
    <view>
      <wd-icon name="chevron-left" color="#ccc" size="24px" @click="goBack"></wd-icon>
    </view>

    <!-- 功能按钮和弹出框 -->
    <view class="flex">
      <wd-tooltip placement="bottom-end" useContentSlot>
        <template v-slot:content>
          <view class="w-full p-[20rpx]">
            <view @click="sweep" class="w-full">扫一扫</view>
            <wd-divider color="#fff"></wd-divider>
            <view @click="addDevice">添加设备</view>
          </view>
        </template>
        <wd-icon name="add" color="#ccc" size="18px"></wd-icon>
      </wd-tooltip>
    </view>
  </view>
</template>

<script lang="ts" setup>
// 扫一扫方法
const sweep = (): void => {
  console.log('扫一扫')
}

// 添加设备方法
const addDevice = (): void => {
  console.log('添加设备')
}

// 返回按钮的方法
const goBack = (): void => {
  uni.navigateBack()
}
</script>

<style scoped>
/* 样式 */
</style>
